<template>
    <div style="padding: 20px">
  <!-- 功能区 -->
      <div style="margin: 10px 0">
        <el-button type="primary" @click="add">新增</el-button>
      </div>
  <!-- 搜索区 -->
      <div style="margin: 10px 0">
        <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;" />
        <el-button style="margin-left: 5px" type="primary" @click="cha">查询</el-button>
      </div>
  
      <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="people_id" label="身份编号" sortable/>
      <el-table-column prop="people_name" label="姓名" />
      <el-table-column prop="date" label="事件日期" />
      <el-table-column prop="type" label="事件类型" />
      <el-table-column prop="des" label="事件描述" />
  
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row)">
      <template #reference>
        <el-button size="mini" type="danger">删除</el-button>
      </template>
    </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  
    <div style="margin: 10px 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  
      <!-- 增加弹出框 -->
      <el-dialog v-model="dialogVisible" title="新增" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="身份编号">
        <el-input v-model="form.people_id" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.people_name" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="事件日期">
        <el-input v-model="form.date" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="事件类型">
        <el-input v-model="form.type" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="事件描述">
        <el-input type="textarea" v-model="form.des" style="width: 80%;" />
      </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>
  
    <!-- 修改弹出框 -->
    <el-dialog v-model="dialogVisible2" title="编辑" width="30%">
      <el-form :model="form2" label-width="120px">
        <el-form-item label="身份编号">
        <el-input v-model="form2.people_id" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form2.people_name" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="事件日期">
        <el-input v-model="form2.date" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="事件类型">
        <el-input v-model="form2.type" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="事件描述">
        <el-input type="textarea" v-model="form2.des" style="width: 80%;" />
      </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="save2">确定</el-button>
        </span>
      </template>
    </el-dialog>
    </div>
    </div>
  </template>
  
  
  
  <script>
  
  import request from "@/utils/request";
  
  export default {
    name: 'Event',
    components: {
      
    },
    
    data(){
      return{
        form:{},
        form2:{},
        dialogVisible:false,
        dialogVisible2:false,
        search:'',
        currentPage:1,
        pageSize:10,
        total:0,
        tableData:[]
      }
    },
  
    created(){
      this.load();
    },
  
    methods:{
  
      load(){
  
          request.get("/event").then(res => {
            console.log(res)
            this.tableData=res.data
          })
  
        },

        cha(){
          request.get("/event/search", {
            params:{
              search: this.search
            }
          }).then(res => {
            console.log(res)
            this.tableData=res.data
          })
        },

  
      add(){
  
        this.dialogVisible=true
        this.form={}
  
      },
      
      //新增
      save(){
        
          request.post("/event",this.form).then(res => {
            console.log(res)
          })
        
          this.dialogVisible = false
          this.load()
  
        },
  
      //更新
      save2(){
  
        request.put("/event",this.form2).then(res => {
            console.log(res)
          })
  
          this.dialogVisible2 = false
          this.load()
      },
  
        handleEdit(row){
  
        this.form2 = JSON.parse(JSON.stringify(row))
        this.dialogVisible2 = true
  
      },    

  
      //删除
      handleDelete(row){
  
        this.form2 = JSON.parse(JSON.stringify(row))
  
        request.put("/event/del",this.form2).then(res => {
          console.log(res)
  
          })
  
          this.load()
      },
  
      handleSizeChange(){
        this.load()
      },
  
      handleCurrentChange(){
        this.load()
      },
      },
  }
  
  </script>